<!--
 * Copyright © 2022 XXXXXXXXX
 * @Author: zhangxiang
 * @Date: 2022-07-19 09:42:10
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-06 16:04:24
 * @Description:
 *
-->

<template>
  <div class="cn-insight-container-container">
    <div style="background:#FFFFFF;margin:15px">
      <!-- 搜索框-->
      <el-row style="padding-top:20px;font-weight:900;padding-bottom:20px">
        <el-col style="margin-left:25px" :span="2">
          选择集群供应商
        </el-col>
        <el-col :span="3">
          <!-- 集群供应商选择-->
          <el-select v-model="searchForm.category" size="mini" placeholder="请选择集群服务商" style="width: 100%" @change="getCluster">
            <el-option v-for="item in cloudVendors" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-col>
        <el-col style="margin-left:30px" :span="1">
          选择集群
        </el-col>
        <el-col :span="3">
          <!-- 集群选择-->
          <el-select v-model="searchForm.cluster" size="mini" placeholder="请选择集群" style="width: 100%" @change="getNode">
            <el-option v-for="item in clusterOptions" :key="item.key" :label="item.key" :value="item.value" />
          </el-select>
        </el-col>
        <el-col style="margin-left:30px" :span="1">
          选择节点
        </el-col>
        <el-col :span="3">
          <!-- 节点选择-->
          <el-select v-model="searchForm.node" size="mini" placeholder="请选择节点" style="width: 100%">
            <el-option v-for="item in nodeOptions" :key="item.key" :label="item.key" :value="item.value" />
          </el-select>
        </el-col>
        <el-col style="margin-left:30px" :span="2">
          选择容器组
        </el-col>
        <el-col :span="3" style="position:relative;right:30px">
          <!-- 容器组选择-->
          <el-input v-model="searchForm.container" size="mini" clearable placeholder="请选择容器组" style="width: 100%" />
        </el-col>
        <el-col style="margin-left:20px" :span="1">
          <el-button type="primary" size="mini" :loading="isResult" @click="search()">查询</el-button>
        </el-col>
        <el-col :span="1" style="margin-left: 20px;">
          <el-button size="mini" @click="resetClick()">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <div style="background:#FFFFFF;margin:15px">
        <div class="editmanageList">
          <!-- 容器组表格-->
          <el-table :data="containerList" :cell-style="{padding:'0px 0'}" stripe header-cell-class-name="listHeaderCell" :header-cell-style="{ color: '#696969' }" empty-text="暂无数据">
            <!-- 容器组名称-->
            <el-table-column prop="containerName" align="center" width="400" label="容器组名称">
              <template slot-scope="scope">
                <div style="height:45px;width:350px;background:#0091FF">
                  <el-col :span="7">
                    <img style="width:30px;position:relative;top:8px" src="@/assets/imgs/cn-insight/node.png" alt="" />
                  </el-col>
                  <el-col :span="16">
                    <div :title="scope.row.nodeName" style="color:#F2F9FF;font-size:12px;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                      {{ scope.row.podName }}<br />创建于{{ scope.row.age }}之前
                    </div>
                  </el-col>
                </div>
              </template>
            </el-table-column>
            <!-- 节点-->
            <el-table-column prop="nodeName" align="center" label="节点">
              <template slot-scope="scope">
                {{ scope.row.nodeName }}{{ "(" }}{{ scope.row.nodeIp }}{{ ")" }}
              </template>
            </el-table-column>
            <!-- 容器组-->
            <el-table-column prop="podIP" align="center" label="容器组" />
            <!-- CPU-->
            <el-table-column prop="CPU" align="center" label="CPU" width="200">
              <template slot-scope="scope">
                <div style="font-size:12px;color:rgba(105, 105, 105, 1);position: relative;top:7px;right: 26px;">{{ scope.row.cpuUse }}</div>
                <div :ref="'echartsCPU'+scope.row.index" style="height: 40px;width:200px;position: relative;top: 5px;"></div>
              </template>
            </el-table-column>
            <!-- 内存-->
            <el-table-column prop="memory" align="center" label="内存" width="200">
              <template slot-scope="scope">
                <div style="font-size:12px;color:rgba(105, 105, 105, 1);position: relative;top: 7px;right: 26px;">{{ scope.row.memUse }}</div>
                <div :ref="'echartsMemory'+scope.row.index" style="height: 40px;width:200px;position: relative;top: 5px;"></div>
              </template>
            </el-table-column>
            <!-- 操作-->
            <el-table-column label="操作" width="140" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" style="height: 22px;line-height: 22px; padding: 0 10px" @click="linkContainerManage(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row type="flex" justify="end" style="margin-top: 20px;padding-bottom:15px">
            <!-- 页码操作-->
            <el-pagination background :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next" :total="totalData" @current-change="currentChange" />
          </el-row>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getClusterList, getNodeList, getContainerList, getPodTask } from '@/api/cnap/cn-insight'
import cloudVendorHandle from '@/views/mixin/cloudVendorHandle.js'

export default {
  name: 'CNInsightContainer',
  components: {},
  mixins: [cloudVendorHandle],
  props: {
    searchParams: {
      // 初始值
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      isResult: false,
      isInitial: false,
      searchForm: {
        category: '', // 集群供应商
        cluster: '', // 集群名称
        node: '', // 节点
        container: ''// 容器组
      },
      clusterOptions: [], // 集群全集
      nodeOptions: [], // 节点全集
      currentPage: 1, // 当前页面
      pageSize: 10, // 页面数据量
      totalData: 10, // 总数据量
      containerList: []// 容器组数据
    }
  },
  computed: {
    /**
     * @description: 云商参数
     * @return {*}
     */
    cloudVendorValue() {
      return this.searchForm.category
    }
  },
  created() {},
  mounted() {
    this.initData()// 初始化数据
  },
  methods: {
    /**
     * @description: 页面跳转
     * @description: 跳转容器组管理
     * @return {*}
     */
    linkContainerManage(row) {
      this.$router.push({
        path: '/hybrid-cloud/cluster',
        query: {
          k8sClusterName: row.k8sClusterName,
          cloudVendor: row.cloudVendor,
          accountName: row.accountName,
          targetTab: 'pods',
          namespace: row.namespace,
          workLoadName: row.workLoadName
        }
      })
    },
    /**
     * @description: 页面初始化
     * @description: 获取容器组数据
     * @return {*}
     */
    initData() {
      // 如果从节点管理跳转
      // 获取url中参数
      // 直接获取对应容器组数据
      if (this.searchParams) {
        console.log(this.searchParams)
        const category = this.searchParams.category// 集群供应商
        const cluster = this.searchParams.cluster// 集群
        const node = this.searchParams.node// 节点
        this.searchForm.category = category// 集群供应商
        this.searchForm.cluster = cluster// 集群
        this.searchForm.node = node// 节点
        this.searchForm.container = ''// 容器组
        const categoryParams = {
          ...this.cloudVendorParams
        }
        getClusterList(categoryParams).then(res => {
          this.clusterOptions = res.data
          const NodeParams = {
            ...this.cloudVendorParams,
            clusterId: cluster
          }
          getNodeList(NodeParams).then(res => {
            // 返回数据在res.data中
            this.nodeOptions = res.data
            this.getDataList(1)
          })
        })
        this.isInitial = true
      } else {
        this.searchForm.category = ''// 集群供应商
        this.searchForm.cluster = ''// 集群
        this.searchForm.node = ''// 节点
        this.searchForm.container = ''// 容器组
        this.clusterOptions = ''
        this.nodeOptions = ''
        this.getDataList(1)
        this.isInitial = true
      }
    },
    resetClick() {
      this.isInitial = false
      this.searchForm = {
        category: '', // 集群供应商
        cluster: '', // 集群名称
        node: '', // 节点
        container: ''// 容器组
      }
    },
    /**
     * @description: 获取集群供应商下的集群
     * @description: 选择集群供应商生效
     * @return {*}
     */
    getCluster(val) {
      const params = {
        ...this.cloudVendorParams
      }
      this.searchForm.cluster = ''// 原本集群置空
      this.nodeOptions = []// 节点列表置空
      this.searchForm.node = ''// 节点指控
      this.clusterOptions = []// 集群列表置空
      this.searchForm.container = ''// 容器组置空
      // this.containerOptions = []
      getClusterList(params).then(res => {
        this.clusterOptions = res.data// 返回数据在res.data中
      })
    },
    /**
     * @description: 获取集群下的节点
     * @description: 选择集群生效
     * @return {*}
     */
    getNode(val) {
      this.searchForm.node = ''// 节点指控
      this.nodeOptions = []// 节点列表置空
      this.searchForm.container = ''// 容器组置空
      this.containerOptions = []// 容器组列表
      const params = {
        ...this.cloudVendorParams,
        clusterId: val
      }
      getNodeList(params).then(res => {
        this.nodeOptions = res.data// 返回数据在res.data中
      })
    },
    /**
     * @description: 获取节点下的容器组
     * @description: 选择节点生效
     * @return {*}
     */
    getContainer(val) {
      this.searchForm.container = ''// 容器组置空
      this.containerOptions = []// 容器组置空
      const params = {
        ...this.cloudVendorParams,
        clusterName: this.searchForm.cluster,
        nodeName: val
      }
      getContainerList(params).then(res => {
        this.containerOptions = res.data// 返回数据在res.data中
      })
    },
    /**
     * @description: 趋势如绘制
     * @description: CPU趋势图
     * @return {*}
     */
    getCPUEcharts() {
      // 设置延时展示
      setTimeout(_ => {
        this.containerList.forEach(e => {
          const myChart = echarts.init(this.$refs['echartsCPU' + e.index])
          myChart.setOption({
            grid: {
              left: '0', // 位置
              top: '5%', // 位置
              right: '0', // 位置
              bottom: '0%', // 位置
              containLabel: true
            },
            xAxis: {
              type: 'category',
              // 不显示x轴线
              show: false

            },
            yAxis: {
              type: 'value',
              show: false
            },
            series: [{
              data: e.CPU, // 数据源
              type: 'line', // 类型
              xAxisIndex: 0,
              yAxisIndex: 0,
              width: 25,
              smooth: true, // 平滑曲线显示
              showAllSymbol: true, // 显示所有图形。
              symbol: 'circle', // 标记的图形为实心圆
              symbolSize: 0, // 标记的大小
              itemStyle: {
                // 折线拐点标志的样式
                color: '#92ccd0'
              },
              lineStyle: {
                normal: {
                  width: 1,
                  color: {
                    type: 'linear',
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(39, 95, 252, 1)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(229, 17, 248, 1)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(161, 96, 253, 0.1)',
                  shadowBlur: 10,
                  shadowOffsetY: 20
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(161, 96, 253, 0.2000)'// 渐变色
                  }, {
                    offset: 0.8,
                    color: 'rgba(161, 96, 253, 0)'// 渐变色
                  }], false),
                  shadowColor: 'rgba(161, 96, 253, 0.2000)', // 阴影颜色
                  shadowBlur: 10
                }
              }
            }]
          })
          window.addEventListener('resize', () => {
            myChart.resize()// 自适应大小
          })
        })
      }, 200)
    },
    /**
     * @description: 趋势如绘制
     * @description: CPU趋势图
     * @return {*}
     */
    getMemoryEcharts() {
      // 延时展示
      setTimeout(_ => {
        this.containerList.forEach(e => {
          const myChart = echarts.init(this.$refs['echartsMemory' + e.index])
          myChart.setOption({
            grid: {
              left: '0', // 位置
              top: '5%', // 位置
              right: '0', // 位置
              bottom: '%', // 位置
              containLabel: true
            },
            xAxis: {
              type: 'category',
              // 不显示x轴线
              show: false

            },
            yAxis: {
              type: 'value',
              show: false
            },
            series: [{
              data: e.CPU, // 数据源
              type: 'line', // 类型
              xAxisIndex: 0,
              yAxisIndex: 0,
              width: 25,
              smooth: true, // 平滑曲线显示
              showAllSymbol: true, // 显示所有图形。
              symbol: 'circle', // 标记的图形为实心圆
              symbolSize: 0, // 标记的大小
              itemStyle: {
                // 折线拐点标志的样式
                color: '#92ccd0'
              },
              lineStyle: {
                normal: {
                  width: 1,
                  color: {
                    type: 'linear',
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(39, 95, 252, 1)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(17, 63, 248, 1)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  },
                  shadowColor: 'rgba(161, 96, 253, 0.1)', // 阴影颜色
                  shadowBlur: 10,
                  shadowOffsetY: 20
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(161, 96, 253, 0.2000)'// 渐变色
                  }, {
                    offset: 0.8,
                    color: 'rgba(161, 96, 253, 0)'// 渐变色
                  }], false),
                  shadowColor: 'rgba(161, 96, 253, 0.2000)', // 阴影颜色
                  shadowBlur: 10
                }
              }
            }]
          })
          window.addEventListener('resize', () => {
            myChart.resize()// 自适应大小
          })
        })
      }, 200)
    },
    /**
     * @description: 改变页码
     * @description: 获取数据
     * @return {*}
     */
    currentChange(val) {
      this.pageNum = val
      this.getDataList(this.pageNum)
    },
    /**
     * @description: 点击搜索
     * @description: 获取数据
     * @return {*}
     */
    search() {
      this.getDataList(1)
    },
    /**
     * @description: 各种操作触发
     * @description: 获取数据
     * @return {*}
     */
    getDataList(page) {
      if (this.isInitial) {
        // if (this.searchForm.category === '') {
        //   this.$message.error('集群供应商不能为空')// 参数校验
        //   return
        // }
        // if (this.searchForm.cluster === '') {
        //   this.$message.error('集群不能为空')// 参数校验
        //   return
        // }
        // if (this.searchForm.node === '') {
        //   this.$message.error('节点不能为空')// 参数校验
        //   return
        // }
        this.isResult = true
      }
      this.containerList = []// 容器组表格数据置空
      const params = {
        ...this.cloudVendorParams, // 集群供应商
        k8sClusterName: this.searchForm.cluster, // 集群
        nodeName: this.searchForm.node, // 节点
        keyWord: this.searchForm.container, // 容器组
        page: page || this.currentPage, // 页面
        pageSize: this.pageSize// 页面大小
      }
      this.currentPage = params.page
      getPodTask(params).then(res => {
        // res.code === 200正常
        if (res.code === 200) {
          // 数据在res.data中
          for (let i = 0; i < res.data.result.length; i++) {
            const item = {
              index: (this.currentPage - 1) * this.pageSize + i + 1, // 表格数据标号
              podIP: res.data.result[i].podIP, // 表格数据容器组ip
              podName: res.data.result[i].podName, // 表格数据名称
              nodeIp: res.data.result[i].nodeIp, // 表格数据节点ip
              nodeName: res.data.result[i].nodeName, // 表格数据节点名称
              age: res.data.result[i].age, // 表格数据age
              CPU: res.data.result[i].cpuLastRate, // 表格数据cpu
              memory: res.data.result[i].memoryLastRate, // 表格数据内存
              cpuUse: res.data.result[i].cpuUse, // 表格数据cpu使用率
              memUse: res.data.result[i].memUse, // 表格数据内存使用率
              namespace: res.data.result[i].namespace, // 表格数据命名空间
              cloudVendor: res.data.result[i].cloudVendor, // 表格数据集群供应商
              accountName: res.data.result[i].accountName || '', // 云账户
              k8sClusterName: res.data.result[i].k8sClusterName, // 表格数据集群名称
              workLoadName: res.data.result[i].workLoadModel ? res.data.result[i].workLoadModel.workLoadName : ''// 表格数据工作负载
            }
            this.containerList.push(item)
          }
          this.totalData = res.data.totalNum// 总数
          this.getCPUEcharts()// 绘制cpu趋势图
          this.getMemoryEcharts()// 绘制内存趋势图
          this.isResult = false
        } else {
          // 数据查询失败
          // 输出报错信息
          this.isResult = false
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cn-insight-container-container {
    .el-radio-button {
      margin-right: 50px !important;
  }
}
</style>
